<template>
  <div class="player-bottom">
    <!-- 顶部进度区域 -->
    <div class="bottom-progress">
      <span ref="eleCurrentTime">00:00</span>
      <!-- 进度条区域 -->
      <div class="progress-bar" @click="progressClick" ref="progressBar">
        <div class="progress-line" ref="progressLine">
          <!-- 进度条圆点 -->
          <div class="progress-dot"></div>
        </div>
      </div>
      <span ref="eleTotalTime">00:00</span>
    </div>
    <!-- 底部控制按钮区域 -->
    <div class="bottom-controll">
      <div class="mode loop" @click="mode" ref="mode"></div>
      <div class="prev" @click="prev"></div>
      <div class="play" @click="play" ref="play"></div>
      <div class="next" @click="next"></div>
      <div class="favorite" @click="favorite" :class="{'active':isFavorite(currentSong)}"></div>
    </div>
  </div>
</template>

<script>
import {mapGetters ,mapActions} from 'vuex'
import modeType from '../../store/modeType'
import { formartTime} from '../../tools/tools'
export default {
  name:"PlayBottm",
  props:{
    //audio 播放时间进度
    currentTime:{
      type:Number,
      required:true,
      default:0
    },
    //歌曲总时长
    totalTime:{
      type:Number,
      required:true,
      default:0
    }
  },
  methods:{ 
    ...mapActions([
      'setIsPlaying',
      'setModeType',
      'setCurrentIndex',
      'setCurrentTime',
      'setFavoriteSong',
    ]),
    play(){
      this.setIsPlaying(!this.isPlaying)
    },
    prev(){
      this.setCurrentIndex(this.currentIndex-1)
    },
    next(){
      this.setCurrentIndex(this.currentIndex+1)
    },
    favorite(){
      this.setFavoriteSong(this.currentSong);
    },
    //验证该歌曲是否收藏 作用于收藏图标
    isFavorite(song){
      let result = this.favoriteList.find(function(currentValue){
        return currentValue.id === song.id;
      })
      return result != undefined;
    },
    //播放模式 - 切换播放模式图标
    mode(){
      if(this.modeType === modeType.loop){
        this.setModeType(modeType.one)
      }else if(this.modeType === modeType.one){
        this.setModeType(modeType.random)
      }else{
        this.setModeType(modeType.loop)
      }
    },
    //点击进度条切换歌曲播放进度
    progressClick(e){
      // 1.计算进度条的位置

      //往前点击时 点击到的是progress-line拿到的e对象不对应改为this.$refs.progressBar
      // let normalLeft = e.target.offsetLeft
      let normalLeft = this.$refs.progressBar.offsetLeft;//进度条距离左边宽度
      let eventLeft = e.pageX//点击时距离视口左边宽度
      let clickLeft = eventLeft - normalLeft//点击时距离进度条最左边的宽度
      // let progressWidth = e.target.offsetWidth;
      let progressWidth = this.$refs.progressBar.offsetWidth//进度条总宽度
      //进度除以进度条宽度得到需要前进或后退的比例
      let value = clickLeft / progressWidth
      this.$refs.progressLine.style.width = value * 100 + '%';//修改progressLine宽度 - 小圆点移动

      // 2.计算当前应该从什么地方开始播放
      //点击后当前播放时间进度
      let currentTime = this.totalTime * value
      //修改vuex中播放时间进度
      this.setCurrentTime(currentTime)

    }
  },
  computed:{
   ...mapGetters([
      'isPlaying',
      'modeType',
      'currentIndex',
      'favoriteList',
      'currentSong',
    ])
  },
  watch:{
    //监听是否播放 - 修改播放图标
    isPlaying(newValue,oldValue){
      if(newValue){
        this.$refs.play.classList.add('active')
      }else{
        this.$refs.play.classList.remove('active')
      }
    },
    //播放模式 - 修改播放模式图片
    modeType(newValue,oldValue){
      if(newValue === 0){
        this.$refs.mode.classList.add('loop')
        this.$refs.mode.classList.remove('random')
      }else if(newValue === 1){
        this.$refs.mode.classList.add('one')
         this.$refs.mode.classList.remove('loop')
      }else{
        this.$refs.mode.classList.add('random')
         this.$refs.mode.classList.remove('one')
      }
    }, 
    //
    currentTime (newValue, oldValue) {
      // 1.格式化当前播放的时间
      let time = formartTime(newValue);
      this.$refs.eleCurrentTime.innerHTML = `${time.minute}:${time.second}`;
       //根据当前播放时间计算比例
      let value = newValue / this.totalTime * 100;
      this.$refs.progressLine.style.width=value+'%';

    },
    totalTime (newValue, oldValue) {
      // 1.格式化当前播放的时间
      let time = formartTime(newValue);
      this.$refs.eleTotalTime.innerHTML = `${time.minute}:${time.second}`;
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../assets/css/variable";
  @import "../../assets/css/mixin";
.player-bottom{
  position: fixed;
  left: 0;  
  bottom: 0;
  width: 100%;
  .bottom-progress{
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span{
    @include font_size($font_samll);
    @include font_color();
  }
  .progress-bar{//进度条完整(歌曲完整进度)
    width: 100%;
    margin: 0 10px;
    height: 10px;
    background: #fff;
    .progress-line{//进度条浅色(已播放进度)
      width: 0%;//改变宽度使progress-dot左右移动达到进度效果
      height: 100%;
      background: #ccc;
      position: relative;
        .progress-dot{//进度条圆点
          width: 20px;
          height: 20px;
          border-radius: 50%;//圆形
          background: #fff;
          position: absolute;//子绝父相
          left: 100%;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
    .bottom-controll{
    width: 80%;
    margin: 0 auto;
    padding: 50px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    div{
      width: 84px;
      height: 84px;
    }
    .mode{
      &.loop{
        @include bg_img('../../assets/images/loop');
      }
      &.one{
        @include bg_img('../../assets/images/one');
      }
      &.random{
        @include bg_img('../../assets/images/shuffle');
      }        
    }
    .prev{
      @include bg_img('../../assets/images/prev')
    }
    .play{
        @include bg_img('../../assets/images/play');
        &.active{
          @include bg_img('../../assets/images/pause');
        }
    }
    .next{
      @include bg_img('../../assets/images/next');
    }
    .favorite{
      @include bg_img('../../assets/images/un_favorite');
      &.active{
        @include bg_img('../../assets/images/favorite');
      }
    }
  }
}
</style>